<template>
	<view class="bank-container">
		<view class="bank-content">
			<u-empty v-if="!bankList.length" text="很抱歉！暂时还没有银行向您推荐" mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			
			<view v-else class="bank-list">
				<u-card v-for="(bank, index) in bankList" :key="index" 
					:border="false" 
					margin="20rpx"
					:head-border-bottom="false"
					:border-radius="16"
					:shadow="true"
					:head-padding="'24rpx 0 0 0'"
					:body-padding="'0 0 24rpx 0'">
					<view class="bank-info" slot="head">
						<view class="bank-name">
							<text class="name">{{bank.name}}</text>
							<text class="type">{{bank.type}}</text>
						</view>
						<view class="bank-assets">
							<u-icon name="rmb-circle" color="#2979ff" size="28"></u-icon>
							<text class="assets-text">{{bank.assets}}</text>
						</view>
					</view>
					<view class="bank-desc" slot="body">
						<rich-text :nodes="bank.bankdesc"></rich-text>
					</view>
				</u-card>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bankList: []
		}
	},
	onLoad() {
		this.getBankList()
	},
	methods: {
		getBankList() {
			uni.request({
				url: '/api/bf/bank/list',
				method: 'GET',
				success: (res) => {
					this.bankList = res.data.bankList
				}
			})	
		},
		// handleBankClick(bank) {
		// 	// 处理银行卡片点击事件
		// 	uni.showToast({
		// 		title: `点击了${bank.name}`,
		// 		icon: 'none'
		// 	})
		// }
	}
}
</script>

<style scoped lang="scss">
.bank-container {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding: 20rpx;
	
	.bank-content {
		.page-title {
			margin-bottom: 30rpx;
			.title-text {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				display: block;
			}
			.title-desc {
				font-size: 24rpx;
				color: #909399;
				margin-top: 10rpx;
				display: block;
			}
		}
		
		.bank-list {
			.bank-info {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				
				.bank-name {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: 16rpx;
					
					.name {
						font-size: 34rpx;
						font-weight: 600;
						color: #2c3e50;
						word-break: break-all;
					}
					.type {
						font-size: 24rpx;
						color: #5c6b77;
						background-color: #f0f2f5;
						padding: 6rpx 16rpx;
						border-radius: 12rpx;
						white-space: nowrap;
					}
				}
				
				.bank-assets {
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					white-space: nowrap;
					
					.assets-text {
						font-size: 30rpx;
						font-weight: 500;
						color: #2979ff;
						margin-left: 10rpx;
					}
				}
			}
			
			.bank-desc {
				font-size: 28rpx;
				color: #5c6b77;
				line-height: 1.6;
			}
		}
	}
}

// 修改卡片样式
:deep(.u-card) {
	background: #ffffff;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
}

// 修改空状态样式
:deep(.u-empty) {
	padding: 100rpx 0;
	
	.u-empty__image {
		width: 240rpx !important;
		height: 240rpx !important;
	}
	
	.u-empty__text {
		color: #909399;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
}
</style>